<template>
  <view class="container">
    <!-- 顶部信息区域 -->
    <view class="top-section" style="background-color: #E5E6F4;">
      <view class="user-info">
        <image class="avatar":src="userInfo.avatar" v-if="userInfo.avatar" mode="aspectFill"></image>
		<image src="/static/img/icon_me.png" v-else mode="aspectFill" class="avatar"></image>
        <view class="info-text">
          <text class="name">{{userInfo.realname}}</text>
          <text class="account">账号: {{userInfo.id}}</text>
        </view>
      </view>
      <view class="rule-title">
         团队规则
      </view>
    </view>

    <!-- 团队数据标题 -->
    <view class="section-title">
      <text>团队数据</text>
    </view>
	<view v-if="!teamFlag" class="applyLeaderBox">
		<view class="line">
			<view class="input-label">姓名</view>
			<view>
				<input type="text" v-model="applyLeaderName" class="input-field" placeholder="请输入姓名"/>
			</view>
		</view>
		<view class="line">
			<view class="input-label">手机号</view>
			<view>
				<input class="input-field" v-model="applyLeaderPhone" type="number" placeholder="请输入手机号"/>
			</view>
		</view> 
		<view class="applyLeader"  @click="applyLeader">申请成为团长</view>
	</view>
	
    <view class="teamDataBox" v-if="teamFlag">
		<view class="member-count">
		  <text >团队下总人数: {{fydata.userNum}}人</text>
		  <text style="padding-left: 20rpx;">待结算金额: {{fydata.djsfyje}}元</text>
		  <text style="padding-left: 20rpx;">已结算金额: {{fydata.yjsfyje}}元</text>
		  <!-- <text>总人数: {{fydata.length}}人</text> -->
		</view>
		 <!-- Tab切换 -->
		 <view class="tabs">
		   <view 
		     class="tab-item" 
		     :class="{active: activeTab === 0}"
		     @click="activeTabFN(0)"
		   >
		     全部成员
		   </view>
		   <view 
		     class="tab-item" 
		     :class="{active: activeTab === 1}"
		     @click="activeTabFN(1)"
		   >
		     一级成员
		   </view>
		   <view 
		     class="tab-item" 
		     :class="{active: activeTab === 2}"
		     @click="activeTabFN(2)"
		   >
		     二级成员
		   </view>
		 </view>
		 
		 <!-- 时间选择 -->
		 <view class="time-selector">
		   <picker mode="date" @change="bindStartDateChange">
		     <view class="time-item">
		       <text>开始时间: {{startDate}}</text>
		       <uni-icons type="arrowdown" size="16"></uni-icons>
		     </view>
		   </picker>
		   <picker mode="date" @change="bindEndDateChange">
		     <view class="time-item">
		       <text>结束时间: {{endDate}}</text>
		       <uni-icons type="arrowdown" size="16"></uni-icons>
		     </view>
		   </picker>
		 </view>
		 
		 <!-- 人数统计 -->
		 <view class="member-count">
		   <text>人数: {{memberList.length}}人</text>
		  <!-- <text style="padding-left: 20rpx;">待结算金额: {{fydata.djsfyje}}元</text>
		   <text style="padding-left: 20rpx;">已结算金额: {{fydata.yjsfyje}}元</text> -->
		   <!-- <text>总人数: {{fydata.length}}人</text> -->
		 </view>
		 
		 <!-- 成员列表 -->
		 <view class="member-list">
		   <view class="list-header">
		     <text>姓名</text>
		     <text>级别</text>
		     <text>加入时间</text>
		   </view>
		   <view 
		     class="member-item" 
		     v-for="(item, index) in memberList" 
		     :key="index"
		   >
		     <text>{{item.realname}}</text>
		     <text v-if="item.userLevel==1">一级</text>
			 <text v-if="item.userLevel==2">二级</text>
		     <text v-if="item.createTime">{{item.createTime.slice(0,10)}}</text>
		   </view>
		 </view>
	</view>
 
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 0,
      startDate: '点击选择时间',
      endDate: '点击选择时间',
      memberList: [],
	  userId:'',
	  userInfo:'',
	  teamFlag:false,
	  userLevel:'',
	  endTime:'',
	  startTime:'',
	  applyLeaderName:'',
	  applyLeaderPhone:'',
	  fydata:'',
    }
  },
  onLoad() {
  	this.userInfo= uni.getStorageSync("userInfo")
	this.isLeader()
  },
  methods: {
	isLeader(){
		this.$http('jeecg-boot/app/market/bicCommissionRecord/isLeader',{
				   userId:this.userInfo.id,
				  
		},'GET').then(res => {
				   //console.log(res)
			if(res.success){
				this.teamFlag=res.result
				if(this.teamFlag){
					this.getTeamMemberList()
					this.getstatistics()
				}
			}else{
				
			}
		})
	},
	getTeamMemberList(){
		if(this.activeTab==1){
			this.userLevel=1
		}
		if(this.activeTab==2){
			this.userLevel=2
		}
		if(this.activeTab==0){
			this.userLevel=''
		}
		this.$http('jeecg-boot/app/market/bicCommissionRecord/getTeamMemberList',{
				 leaderId:this.userInfo.id,
				// leaderId: '1959087016788393985',
				 userLevel:this.userLevel,
				 startTime:this.startTime,
				 endTime:this.endTime
		},'POST').then(res => {
				   //console.log(res)
			this.memberList=res.result
		})
	},
	getstatistics(){
		this.$http('jeecg-boot/app/market/bicCommissionRecord/statistics',{
				 userId:this.userInfo.id,
				
		},'GET').then(res => {
				   //console.log(res)
			this.fydata=res.result
		})
	},
	activeTabFN(num){
		this.activeTab=num
		this.getTeamMemberList()
	},
    bindStartDateChange(e) {
      this.startDate = e.detail.value
	  this.startTime= this.startDate+' 00:00:00'
	  this.getTeamMemberList()
    },
    bindEndDateChange(e) {
      this.endDate = e.detail.value
	  this.endTime= this.endDate+' 23:59:59'
	  this.getTeamMemberList()
    },
	applyLeader(){
		if(!this.applyLeaderPhone || !this.applyLeaderPhone){
			uni.showToast({
			 title: '请填写姓名跟手机号',
			 icon:'none',
			 duration: 3000
			});
			
			return false
		}
		uni.showLoading({
			title: '加载中'
		})
		this.$http('jeecg-boot/app/market/bicCommissionRecord/applyLeader',{
				   userId:this.userInfo.id,
				   applyLeaderName:this.applyLeaderName,
				   applyLeaderPhone:this.applyLeaderPhone
		},'POST').then(res => {
				   //console.log(res)
			 uni.hideLoading();
			uni.showToast({
			 title: '申请成功',
			 icon:'none',
			 duration: 3000
			});
			
		 })
	}
  }
}
</script>

<style scoped >
.container {
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  min-height: 100vh;
}

.top-section {
  padding: 20px;
  display: flex;
  border-radius: 0 0 15px 15px;
  justify-content: space-between;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
}

.info-text {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.account {
  font-size: 14px;
  color: #666;
}

.team-rule {
  background-color: #fff;
  padding: 10px;
  border-radius: 8px;
}

.rule-title {
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}

.rule-content {
  font-size: 14px;
  color: #666;
}

.section-title {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.tabs {
  display: flex;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 8px 0;
  color: #666;
}

.tab-item.active {
  color: #007AFF;
  border-bottom: 2px solid #007AFF;
}

.time-selector {
  display: flex;
  padding: 15px;
  justify-content: space-between;
}

.time-item {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 8px 12px;
  border-radius: 5px;
  font-size: 14px;
}

.member-count {
  padding: 10px 15px;
  font-size: 14px;
  color: #666;
}

.member-list {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
}

.list-header {
  display: flex;
  padding: 12px 15px;
  font-weight: bold;
  border-bottom: 1px solid #eee;
}

.list-header text {
  flex: 1;
  text-align: center;
}

.member-item {
  display: flex;
  padding: 12px 15px;
  border-bottom: 1px solid #f5f5f5;
}

.member-item text {
  flex: 1;
  text-align: center;
}
.applyLeader{
	background: linear-gradient(to right, #FF2442, #FF6B81);
	color: #fff;
	padding: 15rpx 40rpx;
	border-radius: 50rpx;
	font-size: 32rpx;
	font-weight: bold;
	width: 600rpx;
	margin: 0 auto;
	text-align: center;
	margin-top: 30rpx;
}
.line{
		display: flex;
		padding: 30rpx 20rpx;
		border-bottom: 1px solid #eee;
		color: #333333;
	}
	.input-field{
		padding-left: 50rpx;
		
	}
.input-label{
	width: 120rpx;
}
</style>